<template>
  <div class="palm-slider">
    <div class="palm-slider-top">
      <!--       <svg-icon
        slot="prefix"
        :icon-class="playerFlag ? 'pause' : 'play'"
        class="el-input__icon input-icon play-button"
        @click="handlePlay"
      /> -->
      <div class="iconPlay">
        <el-icon @click="handlePlay"><VideoPlay v-if="!playerFlag" /><VideoPause v-else /></el-icon>
      </div>
      <div class="palm-slider-line">
        <el-slider
          v-model="sliderValue"
          :step="step"
          :max="sliderValueMax"
          show-stops
          :format-tooltip="formatTooltip"
          tooltip-class="palm-slider-tooltip"
          @change="timeSliderChange"
        >
        </el-slider>
      </div>
    </div>

    <div class="palm-slider-bottom">
      <span>{{ timeStart }}</span>
      <span>{{ timeEnd }}</span>
    </div>
  </div>
</template>

<script setup>
import { ref, watch, defineEmits } from 'vue'
const props = defineProps({
  dataSource: Array
})
const emit = defineEmits(['change'])
const playerFlag = ref(false)
const timer = ref()
const sliderValueMax = ref(1)
const sliderValue = ref(0)
const step = ref(1)
const timeStart = ref('2021-10-01')
const timeEnd = ref('2021-10-01')
watch(
  () => props.dataSource,
  (newValue) => {
    // sliderValue.value = 0
    if (newValue.length > 1) {
      sliderValueMax.value = newValue.length - 1
      timeStart.value = newValue[0]
      timeEnd.value = newValue.slice(-1)[0]
    }
  },
  {
    immediate: true,
    deep: true
  }
)
const handlePlay = () => {
  playerFlag.value = !playerFlag.value
  if (playerFlag.value) {
    player()
  } else {
    pausePlay()
  }
}

const formatTooltip = (val) => {
  return props.dataSource[val]
}
const timeSliderChange = (value) => {
  emit('change', value)
}
// 开始播放
const player = () => {
  if (sliderValue.value === sliderValueMax.value) {
    sliderValue.value = 0
  }
  /*       this.$emit("change", this.sliderValue, this.playerFlag); */
  // 播放进度条
  timer.value = setInterval(() => {
    if (sliderValue.value === sliderValueMax.value) {
      playerFlag.value = false
      timer.value && clearInterval(timer.value)
      timer.value = ''
      return
    }
    sliderValue.value = operation(sliderValue.value, step.value, '+')
    emit('change', sliderValue.value, playerFlag.value)
  }, 3000)
}
const operation = (a, b, op) => {
  console.log(a, b, op, '666')

  const toInteger = (floatNum) => {
    let ret = { times: 1, num: 0 }
    if (Math.floor(floatNum) === floatNum) {
      ret.num = floatNum
      return ret
    }
    let strfi = floatNum + ''
    let dotPos = strfi.indexOf('.')
    let len = strfi.substring(dotPos + 1).length
    let times = Math.pow(10, len)
    let intNum = Number(floatNum.toString().replace('.', ''))
    ret.times = times
    ret.num = intNum
    return ret
  }
  let o1 = toInteger(a)
  let o2 = toInteger(b)
  let n1 = o1.num
  let n2 = o2.num
  let t1 = o1.times
  let t2 = o2.times
  let max = t1 > t2 ? t1 : t2
  let result
  switch (op) {
    case '+':
      if (t1 === t2) {
        result = n1 + n2
      } else if (t1 > t2) {
        result = n1 + n2 * (t1 / t2)
      } else {
        result = n1 * (t2 / t1) + n2
      }
      return result / max
    case '-':
      if (t1 === t2) {
        result = n1 - n2
      } else if (t1 > t2) {
        result = n1 - n2 * (t1 / t2)
      } else {
        result = n1 * (t2 / t1) - n2
      }
      return result / max
    case '*':
      result = (n1 * n2) / (t1 * t2)
      return result
    case '/':
      result = (n1 / n2) * (t2 / t1)
      return result
  }
}
// 暂停播放
const pausePlay = () => {
  playerFlag.value = false
  timer.value && clearInterval(timer.value)
  timer.value = ''
}
</script>

<style scoped lang="less">
.palm-slider {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 20px;
  width: 551px;
  height: 64px;
  background: #ffffff;
  box-shadow: 0px 4px 10px 0px rgba(6, 25, 45, 0.08);
  border-radius: 8px;

  &-top {
    display: flex;
    align-items: center;
    gap: 16px;
  }
  &-bottom {
    margin-top: -10px;
    padding-left: 60px;
    padding-right: 25px;
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    font-family: Microsoft YaHei;
    font-weight: 400;
  }
  .play-button {
    width: 30px;
    height: 30px;
    cursor: pointer;
  }

  .palm-slider-line {
    width: 100%;
  }
}
.iconPlay {
  font-size: 25px;
  cursor: pointer;
  margin-top: 4px;
}
:deep(.el-slider__stop) {
  background-color: #eee;
}
</style>
